<script setup lang="ts">
import * as echarts from "Echarts";
import { onMounted, ref } from "vue";
const charts = ref(null);
onMounted(() => {
    if (charts.value) {
        const myChart = echarts.init(charts.value);
        const option = {
            title: {
                text: '软件授权时间',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '服务名称',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 1048, name: 'ECS服务' },
                        { value: 735, name: 'CDN加速' },
                        { value: 580, name: '邮件' },
                        { value: 484, name: '普通广告' },
                        { value: 300, name: '视频广告' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
});
</script>

<template>
    <div class="charts" ref="charts" style="width: 600px; height: 400px"></div>
</template>

<style lang="scss" scoped></style>
